// ===== 布局相关 Mixins =====

// Flexbox 布局
@mixin flex(
  $direction: row,
  $justify: flex-start,
  $align: stretch,
  $wrap: nowrap
) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 居中布局
@mixin center($type: both) {
  @if $type == both {
    @include flex(row, center, center);
  } @else if $type == horizontal {
    @include flex(row, center, stretch);
  } @else if $type == vertical {
    @include flex(row, flex-start, center);
  }
}

// 绝对定位居中
@mixin absolute-center($width: auto, $height: auto) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @if $width != auto {
    width: $width;
  }
  @if $height != auto {
    height: $height;
  }
}

// Grid 布局
@mixin grid($columns: 1fr, $rows: auto, $gap: 0) {
  display: grid;
  grid-template-columns: $columns;
  grid-template-rows: $rows;
  gap: $gap;
}

// ===== 尺寸相关 Mixins =====

// 设置宽高
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// 最小最大尺寸
@mixin min-size($min-width: auto, $min-height: auto) {
  @if $min-width != auto {
    min-width: $min-width;
  }
  @if $min-height != auto {
    min-height: $min-height;
  }
}

@mixin max-size($max-width: auto, $max-height: auto) {
  @if $max-width != auto {
    max-width: $max-width;
  }
  @if $max-height != auto {
    max-height: $max-height;
  }
}

// ===== 文字相关 Mixins =====

// 文字省略
@mixin ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 文字样式
@mixin text-style(
  $size: inherit,
  $weight: normal,
  $color: inherit,
  $line-height: 1.6
) {
  font-size: $size;
  font-weight: $weight;
  color: $color;
  line-height: $line-height;
}

// ===== 边框和圆角 Mixins =====

// 边框
@mixin border($width: 1px, $style: solid, $color: #ddd, $radius: 0) {
  border: $width $style $color;
  @if $radius != 0 {
    border-radius: $radius;
  }
}

// 圆角
@mixin border-radius($radius) {
  border-radius: $radius;
}

// 圆形
@mixin circle($size) {
  @include size($size);
  border-radius: 50%;
}

// ===== 阴影 Mixins =====

// 盒子阴影
@mixin box-shadow(
  $x: 0,
  $y: 2px,
  $blur: 4px,
  $spread: 0,
  $color: rgba(0, 0, 0, 0.1)
) {
  box-shadow: $x $y $blur $spread $color;
}

// 文字阴影
@mixin text-shadow($x: 1px, $y: 1px, $blur: 2px, $color: rgba(0, 0, 0, 0.3)) {
  text-shadow: $x $y $blur $color;
}

// ===== 渐变 Mixins =====

// 线性渐变
@mixin linear-gradient($direction: to bottom, $colors...) {
  background: linear-gradient($direction, $colors);
}

// 径向渐变
@mixin radial-gradient($shape: circle, $colors...) {
  background: radial-gradient($shape, $colors);
}

// ===== 动画和过渡 Mixins =====

// 过渡动画
@mixin transition(
  $properties: all,
  $duration: 0.3s,
  $timing: ease,
  $delay: 0s
) {
  transition: $properties $duration $timing $delay;
}

// 变换
@mixin transform($transforms...) {
  transform: $transforms;
}

// 动画
@mixin animation(
  $name,
  $duration: 1s,
  $timing: ease,
  $delay: 0s,
  $iteration: 1,
  $direction: normal,
  $fill-mode: both
) {
  animation: $name $duration $timing $delay $iteration $direction $fill-mode;
}

// ===== 移动端适配 Mixins =====

// 1px 边框解决方案
@mixin hairline($direction: all, $color: #ddd) {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    background-color: $color;

    @if $direction == all {
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      border: 1px solid $color;
      transform: scale(0.5);
      transform-origin: 0 0;
    } @else if $direction == top {
      top: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    } @else if $direction == bottom {
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    } @else if $direction == left {
      top: 0;
      left: 0;
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    } @else if $direction == right {
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      transform: scaleX(0.5);
    }
  }
}

// 安全区域适配
@mixin safe-area($property: padding, $direction: all) {
  @if $direction == all {
    #{$property}-top: constant(safe-area-inset-top);
    #{$property}-right: constant(safe-area-inset-right);
    #{$property}-bottom: constant(safe-area-inset-bottom);
    #{$property}-left: constant(safe-area-inset-left);

    #{$property}-top: env(safe-area-inset-top);
    #{$property}-right: env(safe-area-inset-right);
    #{$property}-bottom: env(safe-area-inset-bottom);
    #{$property}-left: env(safe-area-inset-left);
  } @else {
    #{$property}-#{$direction}: constant(safe-area-inset-#{$direction});
    #{$property}-#{$direction}: env(safe-area-inset-#{$direction});
  }
}

// ===== 工具类 Mixins =====

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 隐藏滚动条
@mixin hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

// 自定义滚动条
@mixin custom-scrollbar(
  $width: 6px,
  $track-color: #f1f1f1,
  $thumb-color: #c1c1c1,
  $thumb-hover-color: #a8a8a8
) {
  &::-webkit-scrollbar {
    width: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;

    &:hover {
      background: $thumb-hover-color;
    }
  }
}

// 禁用选择
@mixin no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// 启用选择
@mixin enable-select {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
